<template>
  <div @click="toclose" class="close">
    <van-popup
      v-model="show"
      position="right"
      :style="{ width: '78%', height: '100vh' }"
      class="filter"
      @click.stop="ff"
    >
      <div class="filter-header">筛选</div>
      <div class="content">
        <div class="filter-price">
          <p>价格区间</p>
          <div class="price-range">
            <input type="text" placeholder="最低价" v-model="lowPrice" />
            <span>—</span>
            <input type="text" placeholder="最高价" v-model="highPrice" />
          </div>
        </div>
        <div class="filter-classify" v-if="filterList">
          <p>分类</p>
          <ul class="classify">
            <li
              v-for="i in filterList?.categoryList"
              :key="i.categoryId"
              @click="addFilterCondition(i.categoryId)"
            >
              <span :class="{ active: i.categoryId == filterCategoryId }">{{
                i.categoryName
              }}</span>
            </li>
          </ul>
        </div>
        <div class="filter-unit">
          <ul class="unit">
            <li v-for="i in filterList?.attributeList" :key="i.attributeId">
              <p>{{ i.attributeName }}</p>
              <span
                :class="{
                  active: unit.find(
                    (o) =>
                      o ==
                      i.attributeName +
                        '_' +
                        i.attributeValueList[0]?.attributeValue
                  ),
                }"
                @click="
                  addUnitFilterCondition(
                    i.attributeName,
                    i.attributeValueList[0]?.attributeValue
                  )
                "
                >{{ i.attributeValueList[0]?.attributeValue }}</span
              >
            </li>
          </ul>
        </div>
      </div>
      <div class="confirmOrReset">
        <button>重置</button>
        <button @click="filterSubmit">确认</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";

Vue.use(Popup);

import { mapState, mapMutations } from "vuex";
export default {
  props: ["filterList", "text"],
  data() {
    return {
      show: false,
      lowPrice: null,
      highPrice: null,
      filterCategoryId: 0,
      unit: [],
      goodsList: [],
      current: 1,
      goodsLength: 0,
    };
  },

  computed: {
    ...mapState(["filterShow", "ishasfilterCondition", "filterToLoginGoods"]),
  },
  watch: {
    filterShow(newVal) {
      this.show = newVal;
    },
    filterToLoginGoods(newVal) {
      if (newVal) {
        this.current += 1;
        this.axios
          .get(
            `https://m-mall.gxptkc.com/v3/goods/front/goods/goodsList?pageSize=10&current=${this.current}&sort=0&categoryIds=${this.filterCategoryId}&highPrice=${this.highPrice}&lowPrice=${this.lowPrice}&attributeInfo=${this.unit}&keyword=${this.text}`
          )
          .then((res) => {
            this.goodsList = [...this.goodsList, ...res.data.data?.list];
            this.changeFilterGoodsList(this.goodsList);
            this.filterToLoginGoodsHandler(false);
          });
      }
    },
  },
  methods: {
    ...mapMutations([
      "changeFilterShow",
      "changeFilterGoodsList",
      "hasfilterCondition",
      "filterToLoginGoodsHandler",
    ]),

    toclose() {
      this.changeFilterShow(false);
    },
    ff() {}, //用来触发一下，禁止冒泡用的
    addFilterCondition(id) {
      this.filterCategoryId = id;
    },
    addUnitFilterCondition(v1, v2) {
      let str = v1 + "_" + v2;
      if (this.unit.find((o) => o == str)) {
        this.unit = this.unit.filter((o) => o != str);
      } else {
        this.unit = [str, ...this.unit];
      }
    },
    async filterSubmit() {
      //第一次提交的筛选
      this.hasfilterCondition(true); //有筛选条件
      this.current = 1;

      if (!this.lowPrice) {
        this.lowPrice = 0;
      }
      if (!this.highPrice) {
        this.highPrice = 10000;
      }
      if (this.filterCategoryId == 0) {
        this.filterCategoryId = this.$route.query.categoryId || "";
      }
      let res = await this.axios.get(
        `https://m-mall.gxptkc.com/v3/goods/front/goods/goodsList?pageSize=10&current=1&sort=0&categoryIds=${this.filterCategoryId}&highPrice=${this.highPrice}&lowPrice=${this.lowPrice}&attributeInfo=${this.unit}&keyword=${this.text}`
      );
      this.goodsLength = res.data.data?.pagination.total;
      this.$emit("change-goods-length", this.goodsLength);
      this.goodsList = res.data.data?.list;
      this.changeFilterGoodsList(this.goodsList);
      this.changeFilterShow(false);
    },
  },
};
</script>

<style lang="scss" scoped>
$color: rgb(245, 245, 245);
.close {
  .filter {
    background-color: rgb(245, 245, 245);
    .filter-header {
      font-size: 16rem;
      color: #333;
      line-height: 50rem;
      height: 50rem;
      padding-left: 15rem;
    }
    .content {
      height: calc(100vh - 100rem);
      overflow: auto;
      .filter-price {
        background-color: #fff;

        padding: 15rem;
        margin-bottom: 10rem;
        p {
          font-size: 14rem;
          color: #333;
          font-weight: bold;
          margin-bottom: 15rem;
        }
        .price-range {
          display: flex;
          justify-content: space-around;
          align-items: center;
          span {
            color: #999;
          }
          input {
            width: 110rem;
            height: 35rem;
            border: none;
            border-radius: 30rem;
            background-color: rgb(245, 245, 245);
            text-align: center;
          }
        }
      }
      .filter-classify {
        background-color: #fff;
        margin-bottom: 10rem;
        padding: 15rem;
        p {
          font-size: 14rem;
          color: #333;
          font-weight: bold;
          margin-bottom: 20rem;
        }
        ul.classify {
          margin-bottom: 10rem;
          display: flex;
          justify-content: left;
          flex-wrap: wrap;
          li {
            margin-right: 10rem;
            margin-bottom: 29rem;
            span {
              color: #2d2d2d;
              background-color: $color;
              padding: 10rem 15rem;
              border-radius: 20rem;
              &.active {
                color: #fc1c1c;
                background-color: rgba(252, 28, 28, 0.05);
              }
            }
          }
        }
      }
      .filter-unit {
        ul.unit {
          li {
            padding: 15rem;

            background-color: #fff;
            margin-bottom: 10rem;
            p {
              font-size: 14rem;
              color: #333;
              font-weight: bold;
              margin-bottom: 20rem;
            }
            > span {
              color: #2d2d2d;
              background-color: $color;
              padding: 10rem 30rem;
              border-radius: 20rem;
              &.active {
                color: #fc1c1c;
                background-color: rgba(252, 28, 28, 0.05);
              }
            }
          }
        }
      }
    }
    .confirmOrReset {
      height: 50rem;
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #fff;
      display: flex;
      justify-content: right;
      align-items: center;
      button {
        width: 75rem;
        height: 25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13rem;
        border: 1rem solid #ccc;
        border-radius: 10rem;
        margin-right: 10rem;
        &:nth-child(1) {
          background-color: #fff;
          color: #333;
        }
        &:nth-child(2) {
          background-color: #f30300;
          color: #fff;
        }
      }
    }
  }
}
</style>